<template>
  <t-table
    class="plugin-goods-table"
    row-key="id"
    table-layout="auto"
    height="60vh"
    :data="goodsStore.getList()"
    :columns="columns"
    :pagination="goodsStore.page"
    :loading="goodsStore.page.loading"
    @page-change="({ current, pageSize }) => goodsStore.reset(current, pageSize)"
    hover
  >
    <template #code="{ row }">
      <div class="goods-name">
        <div class="item wrap">{{ row.number }}</div>
        <div class="item body">{{ row.code }}</div>
      </div>
    </template>
    <template #menu="{ row }">
      <t-tag theme="primary" variant="light" v-if="row.menu">{{ row.menu.name }}</t-tag>
    </template>
    <template #name="{ row }">
      <div class="goods-name">
        <div class="item"><b>{{ row.name }}</b></div>
        <div class="item body" v-if="row.sname">{{ row.sname }}</div>
      </div>
    </template>
    <template #price="{ row }">
      {{ app.money.format(row.price) }}
    </template>
    <template #price_discount="{ row }">
      {{ app.money.format(row.price_discount) }}
    </template>
    <template #price_two="{ row }">
      {{ app.money.format(row.price_two) }}
    </template>
    <template #price_cost="{ row }">
      {{ app.money.format(row.price_cost) }}
    </template>
    <template #count="{ row }">
      <t-button :theme="row.count <= row.count_min ? 'warning' : 'primary'" variant="text" @click="() => emit('count', row)">{{ row.count }}</t-button>
    </template>
    <template #right="{ row }">
      <t-dropdown :min-column-width="88" trigger="click" @click="item => emit(item.value, row)">
        <t-button theme="primary" variant="text">
          {{ $t('common.active') }}
          <template #suffix><t-icon name="chevron-down" size="14" /></template>
        </t-button>
        <template #dropdown>
          <t-dropdown-menu>
            <t-dropdown-item value="update">{{ $t('common.update') }}</t-dropdown-item>
            <t-dropdown-item value="delete">{{ $t('common.delete') }}</t-dropdown-item>
          </t-dropdown-menu>
        </template>
      </t-dropdown>
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import goodsStore from '../../store'

  const emit = defineEmits(['delete', 'update', 'count'])
  const plugin = index.plugin
  const columns = [{
    title: plugin.t('form.number') + '/' + plugin.t('form.code'),
    colKey: 'code',
    cell: 'code',
    fixed: 'left',
  }, {
    title: plugin.t('form.menu'),
    colKey: 'menu',
    cell: 'menu'
  }, {
    title: plugin.t('form.name'),
    colKey: 'name',
    cell: 'name'
  }, {
    title: plugin.t('form.count'),
    colKey: 'count',
    cell: 'count',
    align: 'center'
  }, {
    title: plugin.t('form.price'),
    colKey: 'price',
    cell: 'price',
    align: 'center'
  }, {
    title: plugin.t('form.price_two'),
    colKey: 'price_two',
    cell: 'price_two',
    align: 'center'
  }, {
    title: plugin.t('form.price_discount'),
    colKey: 'price_discount',
    cell: 'price_discount',
    align: 'center'
  }, {
    title: plugin.t('form.price_cost'),
    colKey: 'price_cost',
    cell: 'price_cost',
    align: 'center'
  }, {
    colKey: 'right',
    cell: 'right',
    fixed: 'right',
    align: 'right'
  }]

  goodsStore.get()
</script>
<style lang="scss">
  @import '@/style/global';

  .tdesign-demo-block-column-large {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
    column-gap: 32px;
  }

  .plugin-goods-table{

    .goods-image{
      height: 45px;
      float: left; 
      margin-right: 10px;
      border-radius: 5px;
    }

    .goods-name{
      height: 45px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      color: $color-title;

      .item{
        width: 100%;
      }

      .body{
        color: $color-body;
      }
    }
  }
</style>